<template>
	<div class="match-detail">
		<header-com :title="title" moduleName="match"></header-com>
		<tabs class="tabs" v-model="activeTab" :tabList="tabList" :activeTab="activeTab" :status="status"></tabs>
		<div v-show="activeTab!=100" style="position: fixed;top: 1.7rem !important;width: 100%;height: 100%;">
			<scroller :on-refresh="refresh" :on-infinite="infinite" ref="myscroller">
				<div v-show="activeTab==3||activeTab==0">
					<match-end-search :groups="slide" v-on:childByValue="childByValue"></match-end-search>
				</div>
				<matchBattle class="battle" :matchs="battleList"></matchBattle>
			</scroller>
		</div>
		<div v-show="activeTab==100" style="position: absolute;top: 1.7rem;width: 100%;">
			<teamTabs :slider="slide" v-on:change="slideNumChange"></teamTabs>
			<roundSwiper v-show="shows" :roundList="roundList" v-on:roundNum="roundChange"></roundSwiper>
			<div style="padding: 0.2rem;" v-show="shows">
				<roundNumber :match="signForm" :roundNum="roundNum" :keys="keys" :types="type"></roundNumber>
				<roundForm :form="form" v-if="formshow"></roundForm>
			</div>
			<div v-show="!shows" style="padding: 0.2rem;">暂无数据</div>
		</div>
	</div>
</template>
<script>
	import tabs from "./components/tabs";
	import teamTabs from "./components/teamTabs";
	import roundSwiper from "./components/roundSwiper";
	import matchBattle from "../../../components/match/matchBattle";
	import matchEndSearch from "./components/matchEndSearch";
	import roundNumber from "./components/roundNumber";
	import roundForm from "./components/roundForm";
	export default {
		components: {
			tabs,
			teamTabs,
			roundSwiper,
			matchBattle,
			matchEndSearch,
			roundNumber,
			roundForm
		},
		data() {
			return {
				activeTab: 2,
				com_id: this.$route.query.id,
				battleList: [],
				signForm: [],
				websock: null,
				group: "",
				name: "",
				match_date: "",
				slide: [], //模拟
				roundList: [],
				group_list: [],
				keys: [],
				title: this.$route.query.name,
				roundNum: 0,
				type: null,
				form: [],
				indexs: '',
				loop: [],
				num: 0,
				shows: true,
				formshow: true,
				tabList: ["进行中", "已结束", "未开始", "签表"],
				status: [2, 3, 0, 100],
				offset: 0,
				noDate: false,
				ongoingpage: 0,
				ws: null
			};
		},
		mounted() {
			// this.initWebSocket();
			this.$store.commit('SET_MSG', this.$route.query.id)
		},
		watch: {
			activeTab(val) {
				if (val == 100) {
					this.ws.close();
					this.match_list();
				}
				if (val == 2) {
					this.offset = 1
					this.group = "";
					this.name = "";
					this.match_date = "";
					// this.refresh();
					setTimeout(() => {
						this.refresh();
					}, 1500);
				}
				if (val == 3 || val == 0) {
					this.ws.close();
					this.no_ongoing_match()
				}
			},
		},
		methods: {
			no_ongoing_match() {
				var params = new URLSearchParams();
				params.append("com_id", this.com_id);
				params.append("status", this.activeTab);
				params.append("group_id", this.group);
				params.append("match_date", this.match_date);
				params.append("search", this.name);
				params.append("page", this.ongoingpage);
				params.append("open_id",  window.localStorage.getItem("openid"));
				this.$axios
					.post("/mobile/matching/no_ongoing_match", params)
					.then(data => {
						if (data.data.code == 2000) {
							if (this.offset === 1) {
								this.battleList = data.data.data //如果是想下滑动，刷新数据 就让items等于最新数据
							} else {
								this.battleList = this.battleList.concat(data.data.data) //否则就把数据拼接
							}
							if (data.data.data.length < 10) { //每次请求数据是10条，如果数据不够10条，就是没数据了 让页数=0；
								// this.offset = 0
								//               fn(true)
								this.noDate = true
							} else {
								// if (fn) fn()
							}
						} else {
							return false;
						}
					})
					.catch(res => {
						//  console.log(res.msg);
					});
			},
			initWebSocket(fn) {
				//初始化weosocket
				// console.log(this.offset, 'qqq')
				var _this = this;
				_this.ws = new WebSocket("ws://47.104.64.239:8080");
				_this.ws.onopen = function() {
					// console.log("连接成功");
					var logindata =
						'{"type":"gaming","com_id":"' +
						_this.com_id +
						'","group_id":"' +
						_this.group +
						'","status":"' +
						_this.activeTab +
						'","match_date":"' +
						_this.match_date + '","search":"' + _this.name + '","page":"' + _this.offset + '"}';
					_this.ws.send(logindata);
				};
				// _this.noDate = true
				_this.ws.onmessage = function(e) {
					var data = JSON.parse(e.data);
					switch (data.type) {
						//心跳包响应
						case "ping":
							_this.ws.send(
								'{"type":"gaming","com_id":"' +
								_this.com_id +
								'","group_id":"' +
								_this.group +
								'","status":"' +
								_this.activeTab +
								'","match_date":"' +
								_this.match_date +
								'","search":"' +
								_this.name +
								'","page":"' + _this.offset + '"}'
							);
							break;
						case "gaming":
							if (data.code == 2000) {
								if (_this.offset == 1) {
									_this.battleList = data.gaming; //如果是想下滑动，刷新数据 就让items等于最新数据
								} else {
									// _this.battleList =  _this.battleList.concat(data.gaming) //否则就把数据拼接
								}
								if (data.gaming.length < 10) { //每次请求数据是10条，如果数据不够10条，就是没数据了 让页数=0；
									// this.offset = 0
									// fn(true)
									_this.noDate = true
								} else {
									// if (fn) fn()
								}
								//               _this.battleList = data.gaming;
								//               // console.log(data.gaming.length%10,'ss')
								//               if (data.gaming.length % 10 > 0) {
								//                 // alert(1)
								//                 // console.log(121212)
								//                 // _this.offset = 1
								//                 _this.noDate = true
								//                 // fn(true)
								//                 return
								//               } else {
								//                 // if (fn) fn()
								//               }
							}
							if (data.code == 2001) {
								_this.battleList = data.gaming;
								_this.noDate = true
							}
							break;
					}
				};
				_this.$router.afterEach(function() {
					_this.ws.close();
				});
			},
			refresh: function(done) {
				this.offset = 1
				this.ongoingpage = 1
				this.noDate = false;
				setTimeout(() =>{
					if (this.activeTab == 2) {
						this.initWebSocket(done);
					}
					if (this.activeTab == 3 || this.activeTab == 0) {
						this.no_ongoing_match(done);
					}
					this.$refs.myscroller.finishPullToRefresh(); //刷新完毕关闭刷新的转圈圈
				}, 1700)
			},
			infinite: function(done) {
				if (this.noDate) {
					this.$refs.myscroller.finishInfinite(true); //这个方法是不让它加载了，显示“没有更多数据”，要不然会一直转圈圈
				} else {
					setTimeout(() => {
						this.offset++; //下拉一次页数+1
						this.ongoingpage++;
						if (this.activeTab == 2) {
							this.initWebSocket(done);
						}
						if (this.activeTab == 3 || this.activeTab == 0) {
							this.no_ongoing_match(done);
						}
						done(); //进行下一次加载操作
					}, 1500);
				}
			},
			match_list() {
				var params = new URLSearchParams();
				params.append("com_id", this.$route.query.id);
				this.$axios
					.post("/mobile/matching/search_list", params)
					.then(res => {
						if ((res.data.code = 2000)) {
							// console.log(res.data.data.group);
							this.slide = res.data.data.group;
							this.type = this.slide[0].com_system; //默认
							this.signform(res.data.data.group[0].group_id, this.type);
						}
					})
					.catch(res => {
						//  console.log(res.msg);
					});
			},
			signform(group_id, type) {
				console.log(type)
				if (type == 3) {
					var params = new URLSearchParams();
					params.append("group_id", group_id);
					this.$axios
						.post("/mobile/v1/loop/sign_table", params)
						.then(res => {
							if ((res.data.code == 200)) {
								this.group_list = res.data.data[0][0];
								this.roundChange(0)
								var arr = []
								let first_wheel = this.slide[this.num].first_wheel
								for (var i = 0; i < first_wheel; i++) {
									arr.push('第' + (i + 1) + '轮')
								}
								arr[arr.length - 2] = "半决赛"
								arr[arr.length - 1] = "决赛"
								console.log(arr)
								this.roundList = arr
							}
						})
						.catch(res => {
							//  console.log(res.msg);
						});
				}

				if (type == 2) {
					this.indexs = group_id;
					this.roundForms()
					this.loop_platoon()
					// this.roundChange(0)
					var arr = []
					arr[arr.length] = "A组"
					// console.log(arr)
					this.roundList = arr
				}

				if (type == 1) {
					this.indexs = group_id;
					this.roundForms()
					this.loop_platoon()
					this.sign_out()
					var arr = []
					let letter = [];
					let str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
					letter = str.split('');
					let first_num = this.slide[this.num].first_num
					let second_wheel = this.slide[this.num].second_wheel
					for (var i = 0; i < first_num; i++) {
						arr.push('第一阶段-' + letter[i] + '组')
					}
					for (var i = 0; i < second_wheel; i++) {
						arr.push('第二阶段-第' + (i + 1) + '轮')
					}
					// console.log(arr)
					this.roundList = arr
				}
				if (type == 4) {
					this.indexs = group_id;
					this.roundForms()
					this.loop_platoon()
					var arr = []
					let letter = [];
					let str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
					letter = str.split('');
					let first_wheel = this.slide[this.num].first_wheel
					let second_wheel = this.slide[this.num].second_wheel
					for (var i = 0; i < first_wheel; i++) {
						arr.push('第一阶段-' + letter[i] + '组')
					}
					for (var i = 0; i < second_wheel; i++) {
						arr.push('第二阶段-第' + (i + 1) + '轮')
					}
					// console.log(arr)
					this.roundList = arr
				}
				if (type == null) {
					this.shows = false
				} else {
					this.shows = true
				}
			},
			childByValue(childValue) {
				this.group = childValue.group_id;
				this.name = childValue.name;
				this.match_date = childValue.match_date;
				// this.initWebSocket();
				this.no_ongoing_match()
			},
			slideNumChange(slideNum) {
				console.log(slideNum)
				this.num = slideNum.i;
				this.type = slideNum.type;
				this.indexs = slideNum.index;
				this.signform(slideNum.index, slideNum.type)
				this.roundNum = 0;
				this.formshow = true;
			},
			roundChange(roundNum) {
				this.roundNum = roundNum;
				var keys = [];
				var values = [];
				for (var key in this.group_list[roundNum]) {
					if (this.group_list[roundNum].hasOwnProperty(key) === true) {
						keys.push(key);
						values.push(this.group_list[roundNum][key]);
					}
				}
				if (this.type == 3) {
					this.formshow = false;
					var ke = []
					for (var i = 0; i < keys.length; i++) {
						ke.push(Number(keys[i]) + 1)
					}
					this.keys = ke
					// console.log(values)
					this.signForm = values;
				}
				if (this.type == 1) {
					this.roundForms()
					this.loop_platoon()
				}
				if (this.type == 4) {
					this.loop_platoon()
				}
			},
			roundForms() {
				var params = new URLSearchParams();
				params.append("group_id", this.indexs);
				this.$axios
					.post("/mobile/v1/loop/loop_table", params)
					.then(res => {
						if ((res.data.code == 200)) {
							if (this.roundNum >= this.slide[this.num].first_num) {
								this.formshow = false;
							} else {
								this.formshow = true;
								this.form = res.data.data[this.roundNum]
							}

						}
					})
					.catch(res => {
						//  console.log(res.msg);
					});
			},
			loop_platoon() {
				var params = new URLSearchParams();
				params.append("group_id", this.indexs);
				this.$axios
					.post("/mobile/v1/loop/loop_platoon", params)
					.then(res => {
						if ((res.data.code == 200)) {
							if (this.type == 2) {
								this.signForm = res.data.data[0]
							}
							if (this.type == 1) {
								this.signForm = res.data.data[this.roundNum]
							}
							if (this.type == 4) {
								console.log(res.data.data[this.roundNum])
								this.signForm = res.data.data[this.roundNum]
							}
						}
					})
					.catch(res => {
						//  console.log(res.msg);
					});
			},
			sign_out() {
				var params = new URLSearchParams();
				params.append("group_id", this.indexs);
				this.$axios
					.post("api/v1/loop/sign_out", params)
					.then(res => {
						if ((res.data.code == 200)) {
							//             if (this.roundNum >= this.slide[this.num].first_num) {
							//               this.formshow = false;
							//             } else {
							//               this.formshow = true;
							//               this.form = res.data.data[this.roundNum]
							//             }

						}
					})
					.catch(res => {
						//  console.log(res.msg);
					});
			}
		}
	};
</script>
<style scoped>
	/*.battle{box-shadow: 0 0.04rem 0.1rem 0.03rem #e6e6e6;}*/

	.match-detail {
		margin-bottom: 1.1rem;
	}

	.tabs {
		position: fixed;
		top: 45px;
		z-index: 9999;
		width: 100%;
	}
</style>
